export type DrawInfoType = {};
export type ImgsInfoType = {
  url: string;
  drawInfo: [number, number, number, number][];
  color?: string;
  [key: string]: any;
};
/**
 * 处理图片函数
 * 接受一个图片信息数组，返回一个 Promise，解析为处理后的图片 URL 数组
 * @param imgsInfo 图片信息数组，包含每张图片的URL、绘制信息和颜色
 * @returns 返回一个 Promise，解析为处理后的图片 URL 数组
 */
export const dealImage = async (imgsInfo: ImgsInfoType[]) => {
  // 创建一个 canvas 元素
  const canvas = document.createElement('canvas');
  // 获取 canvas 的 2D 绘图上下文
  const ctx = canvas.getContext('2d');

  // 如果无法获取 2D 上下文，则抛出错误
  if (!ctx) {
    throw new Error('Failed to get 2D context from canvas');
  }

  /**
     * 处理单张图片的函数
     * @param {ImgsInfoType} imgInfo 图片信息，包括 URL、绘制信息和颜色
     * @returns 返回一个 Promise，解析为处理后的图片 URL
     */
  const setImg = async ({ url, drawInfo, color }: ImgsInfoType) => {
    // 如果没有绘制信息，则直接返回原图 URL
    if (drawInfo.length === 0) return url;

    // 返回一个新的 Promise，用于处理图片
    return new Promise((resolve, reject) => {
      // 创建一个新的 Image 对象
      const imgObj = new Image();
      // 设置图片的 src 属性
      imgObj.src = url;
      // 当图片加载成功时，执行绘制操作
      imgObj.onload = () => {
        // 设置 canvas 的宽度和高度
        canvas.width = imgObj.naturalWidth;
        canvas.height = imgObj.naturalHeight;
        // 将图片绘制到 canvas 上
        ctx.drawImage(imgObj, 0, 0);
        // 设置绘制颜色
        ctx.strokeStyle = color || '#FFFFFF';
        // 遍历绘制信息，绘制矩形框
        drawInfo.forEach(([x1, y1, x2, y2]) => {
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y1);
          ctx.lineTo(x2, y2);
          ctx.lineTo(x1, y2);
          ctx.lineTo(x1, y1);
          ctx.stroke();
        });
        // 将 canvas 内容转换为 PNG 格式的 Data URL
        const base = canvas.toDataURL('image/png');
        // 解析 Promise 为处理后的图片 URL
        resolve(base);
      };
      // 如果图片加载失败，则拒绝 Promise 并抛出错误
      imgObj.onerror = (err) => {
        reject(new Error(`Failed to load image: ${err}`));
      };
    });
  };

  try {
    // 创建一个 Promise 数组，用于处理所有图片
    const promises = imgsInfo.map(async (item) => {
      try {
        // 处理每张图片，并返回处理后的 URL
        const url = await setImg(item);
        return url;
      } catch (error) {
        // 如果处理图片时发生错误，则打印错误信息并返回空字符串
        console.error(error);
        return '';
      }
    });

    // 等待所有图片处理完成，并收集处理后的图片 URL
    const canvasImgs = await Promise.all(promises);
    // 移除 canvas 元素
    canvas.remove();
    // 返回处理后的图片 URL 数组
    return canvasImgs;
  } catch (error) {
    // 如果处理图片数组时发生错误，则移除 canvas 元素并抛出错误
    canvas.remove();
    throw error;
  }
};